<template>
    <el-dialog :close-on-click-modal="false" :visible="importFlag" class="zdy-dialog" width="1000px" :title="title"
               :before-close="handleCloseDialog">
        <div class="el-dialog-div">
            <el-row v-if="!importType" :gutter="20" class="importSelect">
                <el-col :span="8">
                    <div class="carList" @click="handleImportChange('file')">
                        <div class="carView">
                            <i class="el-icon-document"></i>
                            <p class="desc"></p>
                        </div>
                    </div>
                    <!--人员信息-->
                    <p class="bottomTitle">{{this.i18n.t('Personnel information')}}</p>
                </el-col>
                <el-col :span="8">
                    <div class="carList" @click="handleImportChange('pic')">
                        <div class="carView">
                            <i class="el-icon-user-solid"></i>
                            <p class="desc"></p>
                        </div>
                    </div>
                    <!--生物特征-->
                    <p class="bottomTitle">{{this.i18n.t('biosignature')}}</p>
                </el-col>
              <el-col :span="8">
                <div class="carList" @click="handleImportChange('qr')">
                  <div class="carView">
                    <i class="iconfont-KUI icon-erweima"></i>
                    <p class="desc"></p>
                  </div>
                </div>
                <!--二维码-->
                <p class="bottomTitle">二维码</p>
              </el-col>
            </el-row>
            <div v-if="importType=='pic'">
                <!--大于1MB和非jpg、jp2格式的照片会被自动过滤掉。-->
                <el-alert
                        show-icon
                        :closable="false"
                        :title="$t('import11')"
                        type="warning">
                </el-alert>
                <br>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form ref="form" :model="form" :inline="true">

                            <el-form-item style="width: 200px">
                                <span>{{$t('image type')}}</span>

                                <el-tooltip placement="top">
                                    <div slot="content">
                                        <div class="TipsView">
                                            <!--人脸-->
                                            <div v-if="form.picType===0">
                                                <!--命名规则：编号.jpg-->
                                                <p>{{this.i18n.t('import1')}}</p>
                                                <!--示例：10000.jpg-->
                                                <p>{{this.i18n.t('import2')}}</p>
                                            </div>
                                            <!--虹膜-->
                                            <div v-if="form.picType===1">
                                                <!--命名规则：编号_左(右)眼.jpg-->
                                                <p>{{this.i18n.t('import3')}}</p>
                                                <!--示例：10000_L.jpg-->
                                                <p>{{this.i18n.t('import4')}}</p>
                                            </div>
                                            <!--掌静脉-->
                                            <div v-if="form.picType===2">
                                                <!--命名规则：编号_左(右)手.jpg-->
                                                <p>{{this.i18n.t('import5')}}</p>
                                                <!--示例：10000_L.jpg-->
                                                <p>{{this.i18n.t('import6')}}</p>
                                            </div>
                                            <!--掌纹-->
                                            <div v-if="form.picType===3">
                                                <!--命名规则：编号_左(右)手.jpg-->
                                                <p>{{this.i18n.t('import5')}}</p>
                                                <!--示例：10000_L.jpg-->
                                                <p>{{this.i18n.t('import6')}}</p>
                                            </div>
                                            <!--指纹-->
                                            <div v-if="form.picType===4">
                                                <!--命名规则：编号_左(右)手.jpg-->
                                                <p>{{this.i18n.t('import7')}}</p>
                                                <!--示例：10000_L1.jpg-->
                                                <p>{{this.i18n.t('import8')}}</p>
                                            </div>
                                            <el-divider v-if="form.picType>0" content-position="left"></el-divider>
                                            <!--L：左，R：右，必须大写。-->
                                            <p v-if="form.picType>0">{{this.i18n.t('import9')}}</p>
                                            <!--1：大拇指，2：食指，3：中指，4：无名指，5：小拇指。-->
                                            <p v-if="form.picType==4">{{this.i18n.t('import10')}}</p>
                                        </div>
                                    </div>
                                    <el-link :underline="false" icon="el-icon-question" style="margin-left: 10px"></el-link>
                                </el-tooltip>


                                <el-select @change="picTypeChange" v-model="form.picType"
                                           :placeholder="$t('Please select')">
                                    <el-option
                                            v-for="item in devTypeList"
                                            :key="item.label"
                                            :label="$t(item.label)"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="">
                                <el-upload
                                        style="height:0"
                                        class="uploadBiosignature"
                                        ref="uploadBiosignature"
                                        multiple
                                        :file-list="fileListBio"
                                        :show-file-list="false"
                                        :accept="importAccept"
                                        action="#"
                                        :on-success="handelSuccess"
                                        :on-preview="handlePreview"
                                        :on-remove="handleRemove"
                                        :on-change="(event,file,fileList)=>{handleChangeBio(event,file,fileList)}"
                                        :auto-upload="false">
                                </el-upload>
                                <!--选择图片按钮-->
                                <el-button icon="el-icon-paperclip" @click="selectPic" size="small" type="">
                                    {{this.i18n.t('Select Picture')}}
                                </el-button>

                            </el-form-item>
                        </el-form>
                    </el-col>
                    <el-col :span="16">
                        <div class="carList importPicView">

                            <!--选择的图片列表-->
                            <div v-if="!errorData.data.length" :infinite-scroll-immediate="true"
                                 style="overflow:auto;border: 0px solid red;width: 100%;height: 330px;">

                                <el-table
                                        size="mini"
                                        ref="importTable"
                                        :show-header="false"
                                        :data="bioFileList.slice((formPage.pageNumber-1)*formPage.pageSize,formPage.pageNumber*formPage.pageSize)"
                                        style="width: 100%;border: 0px solid green;">
                                    <el-table-column
                                            type="index"
                                            label=""
                                            width="100">
                                        <template slot-scope="scope">
                                            <span>{{(formPage.pageNumber - 1) * formPage.pageSize + scope.$index + 1}}</span>
                                        </template>
                                    </el-table-column>
                                    <!--图片-->
                                    <el-table-column
                                            prop="date"
                                            :label="$t('Image')"
                                            width="50">
                                        <template slot-scope="scope">

                                            <i v-show="('base64Url' in scope.row) && scope.row.base64Url.indexOf('data:image/')==-1" class="el-icon-loading"></i>
                                            <img v-show="('base64Url' in scope.row) && scope.row.base64Url.indexOf('data:image/')!=-1" style="width: 40px;height: 40px;" :src="scope.row.base64Url" alt="">

                                            <!--<img style="width: 40px;height: 40px;" :src="scope.row.base64Url" alt="">-->
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            prop="name"
                                            :label="$t('file name')"
                                            width="400">
                                        <!--文件名-->
                                        <template slot-scope="scope">
                                            <!--文件名-->
                                            <p v-if="importResult.fail==0">{{scope.row.name}}</p>

                                            <p style="font-size: 14px;color: red;" >{{scope.row.erroMessage}}</p>

                                            <!--失败原因-->
                                            <!--<p :title="scope.row.name"></p>-->
                                        </template>

                                    </el-table-column>
                                    <!--操作-->
                                    <el-table-column v-if="importResult.fail==0" :label="$t('operation')">
                                        <template slot-scope="scope">
                                            <i class="el-icon-error deleteRow" @click="handleDelete(scope.$index, scope.row)"></i>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                            <div class="paginationBox" style="margin-top: 10px" v-if="bioFileList.length">
                                <el-pagination
                                        small
                                        background
                                        @size-change="handleSizeChange"
                                        @current-change="handleRightCurrentChange"
                                        :current-page.sync="formPage.pageNumber"
                                        :page-size="formPage.pageSize"
                                        layout="sizes,total, prev, pager, next, jumper"
                                        :total="formPageTabletotal"
                                ></el-pagination>
                            </div>
                        </div>
                    </el-col>
                </el-row>


            </div>
            <div v-if="importType=='file'">
                <el-alert
                        :title="$t('Import prompt information')"
                        show-icon
                        :closable="false"
                        type="warning">
                </el-alert>
                <br>
                <el-form ref="form" :model="form">
                    <el-form-item :label="$t('Import File')">
                        <el-upload
                                class="upload-demo"
                                ref="uploadRY"
                                action="https://jsonplaceholder.typicode.com/posts/"
                                :on-preview="handlePreview"
                                :on-remove="handleRemoveExcel"
                                accept=".xls,.xlsx"
                                :on-change="(event)=>{handleChange(event)}"
                                :auto-upload="false">
                            <el-button icon="el-icon-paperclip" slot="trigger" size="small" type="">
                                {{this.i18n.t('optional accessories')}}
                            </el-button>
                            <br>
                            <div style="display: inline-block" slot="tip" class="el-upload__tip">
                                {{this.i18n.t('Supported file formats')}}：xls、xlsx
                            </div>
                            <el-link type="primary" @click="personnelinfoGetexportpersoninfotoexcelteamplate"
                                     class="downloadTemplate" icon="el-icon-download">{{this.i18n.t('Download ImportTemplate')}}
                            </el-link>
                        </el-upload>
                    </el-form-item>
                </el-form>
            </div>
          <!--导入二维码-->
          <div v-if="importType=='qr'">
            <!--大于1MB和非jpg、jp2格式的照片会被自动过滤掉。-->
            <el-alert
                show-icon
                :closable="false"
                :title="$t('import11')"
                type="warning">
            </el-alert>
            <br>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form ref="form" :model="form" :inline="true">

                  <el-form-item style="width: 200px">
                    <span>{{$t('image type')}}</span>

                    <el-tooltip placement="top">
                      <div slot="content">
                        <div class="TipsView">
                          <!--二维码-->
                          <div>

                            <p>命名规则：</p>
                            <p>二维码：zt01_有效期_次数</p>

                            <p>示例: zt01_20210105_20221112_5.jpg</p>
                          </div>
                          <el-divider v-if="form.picType>0" content-position="left"></el-divider>

                          <p>有效期20210405-20221112，有效次数5次</p>
                        </div>
                      </div>
                      <el-link :underline="false" icon="el-icon-question" style="margin-left: 10px"></el-link>
                    </el-tooltip>
                    <br>
                    <el-radio v-model="form.picType" label="5">二维码</el-radio>
                  </el-form-item>
                  <el-form-item label="">
                    <el-upload
                        style="height:0"
                        class="uploadBiosignature"
                        ref="uploadBiosignature"
                        multiple
                        :file-list="fileListBio"
                        :show-file-list="false"
                        :accept="importAccept"
                        action="#"
                        :on-success="handelSuccess"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :on-change="(event,file,fileList)=>{handleChangeBio(event,file,fileList)}"
                        :auto-upload="false">
                    </el-upload>
                    <!--选择图片按钮-->
                    <el-button icon="el-icon-paperclip" @click="selectPic" size="small" type="">
                      {{this.i18n.t('Select Picture')}}
                    </el-button>

                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="16">
                <div class="carList importPicView">

                  <!--选择的图片列表-->
                  <div v-if="!errorData.data.length" :infinite-scroll-immediate="true"
                       style="overflow:auto;border: 0px solid red;width: 100%;height: 330px;">

                    <el-table
                        size="mini"
                        ref="importTable"
                        :show-header="false"
                        :data="bioFileList.slice((formPage.pageNumber-1)*formPage.pageSize,formPage.pageNumber*formPage.pageSize)"
                        style="width: 100%;border: 0px solid green;">
                      <el-table-column
                          type="index"
                          label=""
                          width="100">
                        <template slot-scope="scope">
                          <span>{{(formPage.pageNumber - 1) * formPage.pageSize + scope.$index + 1}}</span>
                        </template>
                      </el-table-column>
                      <!--图片-->
                      <el-table-column
                          prop="date"
                          :label="$t('Image')"
                          width="50">
                        <template slot-scope="scope">

                          <i v-show="('base64Url' in scope.row) && scope.row.base64Url.indexOf('data:image/')==-1" class="el-icon-loading"></i>
                          <img v-show="('base64Url' in scope.row) && scope.row.base64Url.indexOf('data:image/')!=-1" style="width: 40px;height: 40px;" :src="scope.row.base64Url" alt="">

                          <!--<img style="width: 40px;height: 40px;" :src="scope.row.base64Url" alt="">-->
                        </template>
                      </el-table-column>
                      <el-table-column
                          prop="name"
                          :label="$t('file name')"
                          width="400">
                        <!--文件名-->
                        <template slot-scope="scope">
                          <!--文件名-->
                          <p v-if="importResult.fail==0">{{scope.row.name}}</p>

                          <p style="font-size: 14px;color: red;" >{{scope.row.erroMessage}}</p>

                          <!--失败原因-->
                          <!--<p :title="scope.row.name"></p>-->
                        </template>

                      </el-table-column>
                      <!--操作-->
                      <el-table-column v-if="importResult.fail==0" :label="$t('operation')">
                        <template slot-scope="scope">
                          <i class="el-icon-error deleteRow" @click="handleDelete(scope.$index, scope.row)"></i>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                  <div class="paginationBox" style="margin-top: 10px" v-if="bioFileList.length">
                    <el-pagination
                        small
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleRightCurrentChange"
                        :current-page.sync="formPage.pageNumber"
                        :page-size="formPage.pageSize"
                        layout="sizes,total, prev, pager, next, jumper"
                        :total="formPageTabletotal"
                    ></el-pagination>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="footBtnBox">
            <el-button size="small" type="handle" icon="el-icon-back" v-if="importType" @click="backs">{{this.i18n.t('returnsss')}}
            </el-button>
            <el-button size="small" type="handle" @click="handleCloseDialog">{{this.i18n.t('Cancel')}}</el-button>
            <!--导入人员信息-->
            <el-button style="margin-left: 10px;" :loading="importExcelLoading" v-if="personInfoExcelFilePath" size="small" type="primary"
                       @click="submitRYUpload">{{this.i18n.t('import')}}
            </el-button>
            <!--导入生物信息-->
            <el-button style="margin-left: 10px;" size="small" type="primary" v-if="bioFileList.length && importResult.fail==0"
                       @click="submitBioUpload" :loading="importPicLoading">{{this.i18n.t('import')}}
            </el-button>

            <!--<el-button type="primary" :disabled="saveDisabled" @click="submitForm">保存</el-button>-->
        </div>
        <!--导入结果弹窗-->
        <el-dialog
                :show-close="false"
                append-to-body
                :title="$t('Import Results')"
                :visible="importResultFlag"
                v-if="importResultFlag"
                width="30%">
            <div class="footBtnBox">
                <el-descriptions title="" :column="1">
                    <!--总数-->
                    <el-descriptions-item :label="$t('total')">{{importResult.total}}</el-descriptions-item>
                    <!--成功-->
                    <el-descriptions-item :label="$t('success')">{{importResult.success}}</el-descriptions-item>
                    <!--失败-->
                    <el-descriptions-item :label="$t('fail')" style="color: red">{{importResult.fail}}</el-descriptions-item>
                </el-descriptions>
                <!--导入生物信息-->
                <el-button style="margin-left: 10px;" size="small" @click="importResultFlag=false" type="primary">
                    {{this.i18n.t('OK')}}
                </el-button>

                <!--<el-button type="primary" :disabled="saveDisabled" @click="submitForm">保存</el-button>-->
            </div>
        </el-dialog>
    </el-dialog>
</template>

<script>
    import { getGuid} from "@/assets/common/js/global";
    import {
        fileFiletobase64,
        fileImageconverttobase64
    } from "@/api/pcmj/zzxx";
    import {deviceTypeList} from '@/assets/common/js/utils/deviceConfig.js'
    import request from '@/assets/common/js/utils/request'
    import {devicemodelgetlist, getList} from "@/api/jxgl";
    import {
        personnelinfoGetexportpersoninfotoexcelteamplate,
        personnelinfoImportpersoninfo,
        personnelinfoImportpersonbiodatainfo
    } from "@/api/pcmj/zzxx";
    import {uploadfile, uploadfileinfodata} from '@/api/globaTableData' //引入接口
    import {otaGetSbjx, otaUpdate, otaCreate, otaGet,} from '@/api/otagl'//引入接口
    import {create} from '@/api/document'//引入接口
    export default {
        name: "rygl_import",
        components: {},
        props: {
            importFlag: {
                type: Boolean,
                default: false
            },

            editTableRow: {
                type: Object,
                defautl: () => {
                    return {}
                }
            }
        },
        watch: {
            bioFileList: {
                handler(newval, oldval) {
                    console.log(276,this.bioFileList);
                    if(!this.firstEnable&&this.bioFileList.length>0){
                        this.filterImgToBase64()
                        this.firstEnable=true
                    }
                    this.formPageTabletotal = this.bioFileList.length
                },
                deep: true
            },
            'formPage.pageNumber'(newVal, oldVal){
                this.filterImgToBase64()
                console.log('页码变化了',this.$refs.importTable);
                this.$nextTick(() => {

                });

            }
        },
        data() {
            return {
                importResult:{
                    total:0,
                    success:0,
                    fail:0
                },
                importExcelLoading:false,
                importResultFlag:false,
                importPicLoading:false,
                firstEnable:false,
                formPage: {
                    pageNumber: 1,
                    pageSize: 10
                },
                formPageTabletotal: 0,
                count: 0,
                maxLength: 0,
                bioFileListScroll: [],
                importAccept: '.jpg,.jp2',
                errorData: {
                    total: 0,
                    successCount: 0,
                    data: []
                },
                devTypeList: [],
                personInfoExcelFilePath: '',
                clearBioFlag: false,
                importBioFlag: false,
                bioFileList: [],
                importRYFlag: false,
                importType: '',
                activeName: 'jbxx',
                saveDisabled: true,
                loadingTips: false,
                errTips: false,
                percentage: 0,
                sbjxArr: null,
                sbxhArr: null,
                fileListBio: [],
                form: {
                    picType: 0,
                    helpType: 1,
                    deviceModelId: "",
                    modelType: '',
                    version: '',
                    operator: '',
                    fileSize: 0
                },
                title: this.i18n.t('import'),
                otaglForm: {
                    name: '',
                    version: "",
                    devieModel: '',
                    description: "",

                },

                syjxVal: [],
                jxTreeList: [],
                jxArr: [],//包含所有的机型名称和id
                option: {
                    type: 'duo', //传spa为单选，duo为多选
                    defaultProps: {
                        children: 'children', //同element的原始配置
                        label: 'name', //同element的原始配置
                        valKey: 'id', //v-model回传时的value-key
                    }
                },
                zhTipFlag: true,
                fileName: '',
                table_config: {
                    table_tbody: [],
                    thead: [
                        {label: "", prop: "@id", type: "index", width: "100"},
                        // 图片名
                        {
                            label: this.i18n.t('file name'), prop: 'filePath',
                            width: "", type: "function", callback: (row) => {
                                return row.filePath
                            }
                        },
                        // 姓名
                        {label: this.i18n.t('name'), prop: "name", width: ""},
                        // 失败原因
                        {label: this.i18n.t('failure reason'), prop: "erroMessage", type: "", width: ""},
                    ],
                    // 列表前面是否需要显示 checkbox 框，如要显示 值写成 true
                    checkbox: true,
                    index: true,
                    // 请求表格数据的 url ，可直接传入
                    // url: 'personnelinfo/getlist',
                    // 请求表格数据的 方式
                    // method: "post",
                    // formdataType:false,
                    //表格 title 文字
                    tableTitle: false,
                    //是否需要给 th 加 样式boder 如果需要加上addBoderClass 不需要显示空或者不加这个字段配置
                    addBoderClass: "addBoderClass",
                },
            }
        },
        mounted() {

            this.devTypeList = [
                {
                    value: 0,
                    label:this.i18n.t('Face')//人脸
                },{
                    value: 1,
                    label: this.i18n.t('iris')//虹膜
                },{
                    value: 2,
                    label:this.i18n.t('palm')//掌纹
                },{
                    value: 3,
                    label: this.i18n.t('palm vein')//掌静脉
                },{
                    value: 4,
                    label:this.i18n.t('fingerprint')//指纹
                }
            ]

        },
        methods: {
            handleDelete(index,row){
                console.log(row);
                this.bioFileList.map((item, index, arr) => {
                    if (item.id == row.id) {
                        arr.splice(index, 1)
                    }
                })
                console.log('this.bioFileList', this.bioFileList);
            },
            handleSizeChange(val) {
                this.formPage.pageSize = val
                this.filterImgToBase64()
                console.log(`每页 ${val} 条`);
            },
            filterImgToBase64(){
                var data=this.bioFileList.slice((this.formPage.pageNumber - 1) * this.formPage.pageSize, this.formPage.pageNumber * this.formPage.pageSize)
                data.map(async item=>{
                    console.log(426,item);
                    var name=item.name||item.fileName
                    var suffix = name.substring(name.lastIndexOf('.') + 1)
                    console.log('后缀',item.path,suffix);
                    if(suffix=='jp2'){
                        await this.fileImageconverttobase64(item.path||item.filePath).then((resJp2)=>{
                            // item.base64Url=resJp2
                            this.$set(item,'base64Url',resJp2)
                        })
                    }else{
                        await this.fileFiletobase64(item.path||item.filePath).then((res)=>{
                            // item.base64Url=res
                            this.$set(item,'base64Url',res)
                        })
                    }

                })
                console.log('表格内的数据',data);

            },
            // jp2转jpg显示
            async fileImageconverttobase64(filePath){
                let res = await fileImageconverttobase64(filePath);
                return res

            },
            // 将本地文件转成Base64
            async fileFiletobase64(filePath) {
                console.log('图片路径', filePath);
                let res = await fileFiletobase64({filePath: filePath});
                console.log(381,res);
                return res
            },
            handleRightCurrentChange(val) {

                this.formPage.pageNumber = val;
            },
            load() {
                this.count += 100
            },
            handelSuccess() {
                console.log('完毕---------------------');
            },
            picTypeChange(val) {
                console.log(269, val);
                this.resetBio()
            },
            selectPic() {
                // 清空已选的照片列表和导入失败的列表
                this.resetBio()
                this.$refs['uploadBiosignature'].$refs['upload-inner'].handleClick()
            },
            resetBio() {
                this.firstEnable=false
                this.errorData.total = 0
                this.errorData.successCount = 0
                this.errorData.data = []
                this.bioFileList = []
                this.importResult.total=0
                this.importResult.success=0
                this.importResult.fail=0
            },
            backs() {
                this.resetBio()
                this.importType = ''
                this.form.picType = 0
            },
            removeBioFile(path) {
                console.log(path);
                this.bioFileList.map((item, index, arr) => {
                    if (item.path == path) {
                        arr.splice(index, 1)
                    }
                })
                console.log('this.bioFileList', this.bioFileList);
            },
            personnelinfoGetexportpersoninfotoexcelteamplate() {
                personnelinfoGetexportpersoninfotoexcelteamplate().then((res) => {
                    // 人员信息导入模板
                    this.G.exportFile(res, this.i18n.t('Personnel Information Import Template') + new Date().toLocaleString())
                }).catch().finally(() => {

                })
            },
            handleImportChange(type) {
              if (type=='qr'){
                this.form.picType="5"
              }
                this.importType = type
            },
            // 批量导入生物信息
            personnelinfoImportpersonbiodatainfo(filePathList) {
                personnelinfoImportpersonbiodatainfo(filePathList).then(res => {
                    if (res.code == 200) {
                        var importResult = res.data
                        if (importResult.successCount == importResult.total) {
                            this.W.$tips("success", this.i18n.t('Import was successful'));
                            // 更新页面数据
                            this.updateParentData()
                        } else {
                            this.bioFileList=[]
                            this.formPage.pageNumber=1
                            this.importResult.total=importResult.total
                            this.importResult.success=importResult.successCount
                            this.importResult.fail=importResult.total-importResult.successCount
                            this.importResultFlag=true

                            var failList=[]
                            res.data.result.map(item=>{
                                if (!item.isSuccess){
                                    failList.push(item)
                                }
                            })

                            this.bioFileList = failList
                            this.filterImgToBase64()
                        }

                    }
                }).catch().finally(()=>{
                    this.importPicLoading=false
                })
            },
            // 导入生物信息
            submitBioUpload() {
                this.importPicLoading=true
                var fileList = []
                this.bioFileList.map(item => {
                    fileList.push(item.path)
                })
                this.personnelinfoImportpersonbiodatainfo({
                    fileNames: fileList,
                    importType: this.form.picType*1
                })
            },
            // 导入人员信息
            submitRYUpload() {
                this.personnelinfoImportpersoninfo(this.personInfoExcelFilePath)
            },
            handleRemoveExcel() {
                this.personInfoExcelFilePath = ""
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            onchange(file, fileList) {
                this.form.fileSize = file.size
                console.log(168, file, fileList);
                this.resetUploadState()
                if (this.$refs.upload.uploadFiles.length > 1) {
                    this.$refs.upload.uploadFiles.shift()
                }
            },
            resetUploadState() {
                // 进度条进度重置为0
                this.percentage = 0
                // 重置版本号
                this.otaglForm.version = ""
                // 禁用弹窗的保存按钮
                this.saveDisabled = true
                // 隐藏服务器校验中的提示
                this.loadingTips = false
                // 隐藏服务器校验失败提示
                this.errTips = false
            },
            removeFile() {
                this.resetUploadState()
            },

            /**
             * @description  关闭弹窗事件
             * @return not
             * @author xiongyi 2022-06-29 16:48:08
             **/
            handleCloseDialog() {
                this.importType = ""
                this.updateParentData()
                // this.$emit('update:importFlag', false);
                // this.$emit('update:editTableRow', null);
            },
            /**
             * @description  保存新增活修改数据
             * @param  not
             * @return not
             * @author xiongyi 2022-07-06 10:50:18
             **/
            submitForm() {
                this.$refs.otaglForm.validate((valid) => {
                    if (valid) {
                        const sendData = JSON.parse(JSON.stringify(this.form));
                        var deviceModel = "",
                            modelType = ""
                        for (var i = 0; i < this.sbjxArr.length; i++) {
                            if (this.sbjxArr[i].id == sendData.deviceModel) {
                                deviceModel = this.sbjxArr[i].name
                            }
                        }
                        for (var i = 0; i < this.sbxhArr.length; i++) {
                            if (this.sbxhArr[i].devcieTypeId == sendData.deviceModel) {
                                modelType = this.sbxhArr[i].modelName
                            }
                        }
                        let query = {
                            // "operator": sendData.operator,
                            "deviceModel": deviceModel,
                            "modelType": modelType,
                            "version": sendData.version,
                            "helpType": sendData.helpType,
                            "description": sendData.description,
                            "fileSize": sendData.fileSize + '',
                            // "operationTime": new Date().toLocaleString(),
                            "isDeleted": true,
                            "fileName": this.fileName
                        }
                        // if (this.syjxVal.length == 0) {
                        //     this.W.$tips("warning", "该机型型号为空，请重新选择");
                        //     return;
                        // }
                        if (this.editTableRow) {
                            query['id'] = sendData.id,
                                otaUpdate(query).then(res => {
                                    // 修改成功
                                    this.W.$tips("success", this.i18n.t('Modified successfully!'));
                                    this.$parent.onSearch();
                                    this.handleCloseDialog();
                                })
                        } else {
                            create(query).then(res => {
                                // 新增成功
                                this.W.$tips("success", this.i18n.t('Add successfully!'));
                                this.$parent.onSearch();
                                this.handleCloseDialog();
                            })
                        }
                    }
                })
            },
            /**
             * @param obj:{item} --file文件
             * @return: not
             * 导入文件的上传组件回调
             */
            ExcelUpload(item) {
                let query = {
                    fileType: "50041",
                    fileName: item.file.name
                }
                uploadfileinfodata(query).then(res => {
                    var _this = this
                    let resdata = res.data
                    let formdata = new FormData();
                    formdata.append("file", item.file);
                    this.fileName = resdata.fileName;
                    for (let key in resdata.fromDatas) {
                        formdata.append(key, resdata.fromDatas[key]);
                    }
                    let query = {
                        url: resdata.uploadUrl,
                        formdata,
                        resheaders: resdata.headers
                    }
                    // uploadfile(query).then(res => {
                    // })

                    request({
                        method: 'post',
                        // 上传地址，因为我这里的request请求是自己封装过的，所以就只需要填写接口后面的地址即可
                        url: resdata.uploadUrl,
                        upFile: true,
                        timeout: -1,
                        data: formdata,
                        // 重点一：complete就是处理后的上传进度数值1-100
                        onUploadProgress: progressEvent => {
                            const complete = parseInt(
                                ((progressEvent.loaded / progressEvent.total) * 100) | 0,
                                10
                            )
                            // 重点二：onProgress()方法需要以上方接收的形参来调用
                            // 这个方法有一个参数"percent"，给他进度值 complete 即可
                            _this.percentage = complete
                            console.log(complete);
                            if (complete == 100) {
                                _this.loadingTips = true
                            }
                            // param.onProgress({ percent: complete })
                        }
                    }).then(res => {
                        // _this.$refs.upload.clearFiles()
                        console.log(290, res)
                        // 解除保存按钮禁用
                        _this.saveDisabled = false
                    }).catch(err => {
                        // 失败时，显示服务器处理文件失败提示
                        _this.errTips = true
                        // 禁用保存按钮
                        _this.saveDisabled = true
                    }).finally(f => {
                        // 上传请求执行完毕时，隐藏服务器处理中的提示
                        _this.loadingTips = false
                    })
                })
            },
            // 提取文件后缀名
            getSuffix(str) {
                const fileExtension = str.substring(str.lastIndexOf('.') + 1);
                return fileExtension;
            },
            // 更新父页面的数据
            updateParentData() {
                this.$emit("update:importFlag", false);
                this.$parent.getdepartmenttree()
                this.$parent.onSearch()
            },
            // 批量导入人员信息
            personnelinfoImportpersoninfo(filePath) {
                this.importExcelLoading=true
                personnelinfoImportpersoninfo(filePath).then(res => {
                    if (res.code == 200) {
                        this.W.$tips("success", this.i18n.t('Import was successful'));
                        // 更新页面数据
                        this.updateParentData()
                    }
                }).catch().finally(()=>{
                    this.importExcelLoading=false
                })
            },
            handleChangeBio(event,file, fileList) {
                var _this = this
                console.log(432,event,file,fileList);
                if (!this.isElectron) {
                    // 请在桌面端操作
                    this.W.$tips("warning", this.i18n.t("Please operate on the desktop!"));
                } else {
                    this.importBioFlag = true
                    // console.log('小于2M吗',event.raw.size / 1024 / 1024 < 2);
                    var Suffix = this.importAccept
                    if ((Suffix.indexOf(this.getSuffix(event.raw.name)) != -1) && (event.raw.size / 1024 / 1024 < 1)) {

                         _this.bioFileList.push(
                            {
                                name: event.raw.name,
                                path: event.raw.path,
                                id: getGuid(),
                                base64Url: event.raw.path,
                                // raw: event.raw,
                                // result:event.target.result
                            }
                        )
                    }
                }
                console.log(575, this.bioFileList);
            },
            handleChange(file) {
                this.importRYFlag = false
                console.log(file);
                var fileList = this.$refs.uploadRY.$refs["upload-inner"].fileList
                console.log(fileList);

                if (fileList.length > 1) {
                    fileList.splice(0, 1)
                }

                var suffix = this.getSuffix(file.name)
                console.log(396, suffix);
                if (suffix != 'xls' && suffix != 'xlsx') {
                    this.W.$tips("warning", this.i18n.t("Please select an Excel file"));
                    return
                }
                if (!this.isElectron) {
                    // 请在桌面端操作
                    this.W.$tips("warning", this.i18n.t("Please operate on the desktop!"));
                } else {
                    this.importRYFlag = true
                    this.personInfoExcelFilePath = file.raw.path
                    console.log('文件路径', file.raw.path);
                }
                console.log(file);
            },
            progress(event, file, fileList) {
                console.log(event);
                console.log(file);
                console.log(fileList);
            }
        }
    }
</script>

<style lang="scss" scoped>
    .el-dialog-div {
        height: 450px;
        overflow-x: hidden;

        .importSelect {

        }
    }

    .carList {
        background: #f4f4f8;
        color: #0666d2;
        width: 180px;
        height: 390px;
        border: 1px dashed #82b0e8;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;
        box-sizing: border-box;

        .carView {
            text-align: center;

            .desc {
                color: #2478d7;
                margin-top: 5px;
            }

            i {
                font-size: 40px;
            }
        }

        &:hover {
            cursor: pointer;
            opacity: 0.8;
        }

        &:active {
            cursor: pointer;
            opacity: 1;
        }

        &.importPicView {
            width: 100%;
            display: inline-block;
            background: #ffffff;
            overflow-y: scroll;
            padding: 10px;
            box-sizing: border-box;

            .picName {
                display: block;
                line-height: 25px;
            }
        }

        &.importPicView:hover {
            cursor: default;
            opacity: 1;
        }

        &.importPicView:active {
            opacity: 1;
        }
    }

    .bottomTitle {
        text-align: center;
        margin-top: 8px;
    }

    .downloadTemplate {
        line-height: 20px;
        margin-right: 20px;
    }
</style>
<style>
    .el-form-item__content {

    }

    .uploadBiosignature .el-upload-list {
        position: absolute;
        top: -88px;
        left: 250px;
        width: 100%;
        height: 290px;
        overflow-y: scroll;
        overflow-x: hidden;
        box-sizing: border-box;
        border: 1px dashed #82b0e8;
    }
    .deleteRow{
        cursor: pointer;
        color: #6185df;
    }
    .TipsView{
        font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
        font-size: 14px;
        line-height: 23px
    }
</style>
